<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>快递物流系统</title>
	<link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all" />


</head>

<body
	style="background-color: white; padding: 40px 20px 20px 20px; overflow-y: scroll;">
	<div class="layui-inline">
		<div class="layui-inline">
		<input type="hidden" id="address" name="customerId" th:value="${customerId}">
			<button class="layui-btn add_btn" onclick="addAddress();">
				<i class="layui-icon"></i> 添加
			</button>
		</div>
	</div>
	<table id="demo" lay-filter="addressList"></table>
	
	<script type="text/html" id="addressTool">
		<a  class="layui-btn layui-btn-xs edit_btn" lay-event="edit">编辑</a>
	</script>
	<script type="text/javascript"  th:src="@{/lib/layui/layui.js}"></script>
	<script type="text/javascript" th:inline="none">
  
    layui.use(['table','layer', 'jquery'], function(){
	  var table = layui.table;
	  $ = layui.jquery;
		var value = $("#address").val()
		console.log("value: "+value);
		var edit = null;


	  table.render({
	    elem: '#demo'
	    ,url: '/api/customer/AddressList/'+$("#address").val()
	    ,page: true //开启分页
	    ,id: 'destTable'
	    ,cols:[[ 
	    	{
				title: "全选",
				width: 40,
				type: "checkbox",
				fixed: 'left'}
     	      ,{field: 'name', title: '姓名',width:80}
     	      ,{field: 'cellphone', title: '手机',width:130}
     	      ,{field: 'telephone', title: '座机',width:130}
     	      ,{title: '省',width:80,templet: function(d) {
     	    	 var str = d.address.split(",");
     	    	  return str[0];
     	      }
     	      }
     	      ,{title: '市',width:80,templet: function(d) {
					  var str = d.address.split(",");
					  return str[1];
     	      }
     	      }
     	      ,{title: '区',width:80,templet: function(d) {
					  var str = d.address.split(",");
					  return str[2];
     	      }
     	      }
     	      ,{title: '地址',width:120,templet: function(d) {
					  var str = d.address.split(",");
					  return str[3];
     	      }}
     	      ,{ title: '操作',width:120,toolbar: '#addressTool',align:'center', fixed: 'right'}
     	    ]],
     	   
	  });

		table.on('tool(addressList)', function(obj){//能获取一行的data?
			var layEvent = obj.event,
					data = obj.data;

			if(layEvent === 'edit'){ //编辑
				addAddress(data);

			}
		});



		//添加地址事件
		$(".add_btn").click(function() {
			addAddress();
		});
	});


    //编辑客户的收货地址
    function edit(addData){
    	addAddress(addData);
    }



  
  function addAddress(edit){
  	var op = "";
  	var id = $("#address").val();
  	var params = ""
  	if (edit == undefined || edit == null ||edit.length == 0) {
  		op = "新增";
  		params = "addAddress/";

  	} else {
  		op = "编辑";
  		params = "updateAddress/";

  	}
      var index = parent.layui.layer.open({
          title : op+"地址",
          type : 2,
		  area: ['780px','690px'],
          content : "/page/"+params+id,
		  success : function(layero, index) {
			  var body = layui.layer.getChildFrame('body', index);
			  if (edit) {
				  body.find("[name ='']").attr("readonly", true);
				  body.find("#edit").val(index);
			  }
		  }
      })

  }
  </script>
</body>
</html>